<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
		<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<title>评论</title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}

			body {
				width: 10rem;

			}

			.top {
				width: 100%;
				height: 52px;
				background: white;
				position: fixed;
				top: 0px;

			}

			.top input {
				width: 60%;
				height: 32px;
				text-align: center;
				font-size: 14px;
				
				background: url(sousuo.png) no-repeat 30% center;
				border-radius: 20px;
				border: 0px;
				padding-left: 20%;
				font-weight: 700;
				position: absolute;
				left: 7%;
				top: 5px;
			}

			.top img {
				position: absolute;
				top: 7px;
			}

			#box {
				padding: 50px 16px 0px 16px;
			}

			.haoping {
				font-size: 15px;
			}

			.haoping1 {
				margin-bottom: 40px;
				margin-top: 10px;
			}

			.haoping1 p {
				font-size: 12px;
				display: inline-block;
				border: 0.5px solid #23b8ff;
				width: 23%;
				height: 30px;
				line-height: 30px;
				text-align: center;
				border-radius: 20px;

			}

			.haoping1 p:nth-of-type(1) {
				background: rgba(35, 184, 255, .1);
			}

			.haoping1 p:nth-of-type(4) {
				border: 0.5px solid black;
			}

			.top1 {
				width: 100%;
				height: 50px;
				font-size: 14px;
				padding-bottom: 20px;
				position: relative;
			}

			.top1 span {
				position: absolute;
				top: 25%;
				left: 20%;
			}

			.top1 .xing {
				position: absolute;
				top: 29%;
				left: 40%;
			}

			.neirong {
				font-size: 200px;
			}

			.sj p span {
				float: right;
				font-size: 14px;
				color: #bbb;
			}

			.sj p {
				color: #bbb;
				font-size: 14px;
			}

			.pinglun {
				padding-bottom: 30px;
			}
		</style>
	</head>
	<body>


		<div id="box">


			<div class="haoping">
				好评度 100%
			</div>

			<div class="haoping1">
				<p>全部 (999+)</p>
				<p>好评 (999+)</p>
				<p>中评 (0)</p>
				<p>差评 (0)</p>
			</div>

			<div class="pinglun">
				<div class="top1">
					<img width="45px" src="touxiang.jpg">
					<span>孤独的狼</span>
					<div class="xing">
						<img width="16px" src="xing.png">
						<img width="16px" src="xing.png">
						<img width="16px" src="xing.png">
						<img width="16px" src="xing.png">
						<img width="16px" src="xing.png">
					</div>
				</div>
				<div class="neirong">
					好!
				</div>
				<div class="sj">
					<p>已上课13时25分时评论
						<span>2020-06-28</span></p>
				</div>

			</div>
			<div class="pinglun">
				<div class="top1">
					<img width="45px" src="touxiang.jpg">
					<span>孤独的狼</span>
					<div class="xing">
						<img width="16px" src="xing.png">
						<img width="16px" src="xing.png">
						<img width="16px" src="xing.png">
						<img width="16px" src="xing.png">
						<img width="16px" src="xing.png">
					</div>
				</div>
				<div class="neirong">
					<p>很</p><p>好</p><p>！</p>
				</div>
				<div class="sj">
					<p>已上课13时26分时评论
						<span>2020-06-28</span></p>
				</div>

			</div>
			
			<div class="pinglun">
				<div class="top1">
					<img width="45px" src="touxiang.jpg">
					<span>孤独的狼</span>
					<div class="xing">
						<img width="16px" src="xing.png">
						<img width="16px" src="xing.png">
						<img width="16px" src="xing.png">
						<img width="16px" src="xing.png">
						<img width="16px" src="xing.png">
					</div>
				</div>
				<div class="neirong">
					<p>非</p><p>常</p><p>好</p><p>！</p>
				</div>
				<div class="sj">
					<p>已上课13时27分时评论
						<span>2020-06-28</span></p>
				</div>
			
			</div>
		</div>
		<div class="top">
			<img width="26px" src="logo.jpg">
			<input type="text" placeholder="搜索老师、机构、课程" />
		</div>
	</body>
</html>
